<script lang="ts" setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
  borderR: {
    type: Boolean,
    default: true
  },
  product: {
    type: Object
  },
  eleType: {
    default: 0
  },
  colorType: {
    default: 0
  }
});

const currentData = ref<any>({
  colorArr: ['color1','color2','color3','color4','color5','color6','color7','color8']
});

const toRoute = () => {
  router.push({path: "/productDetail", query: {productId: props.product.productId}})
}
const getClass = () => {
  
  return currentData.value.colorArr[props.colorType];
};
const getImg = (str:String, index: any) => {
  if(str.indexOf(",")>0){
    let arr = str.split(',')
    return arr[index];
  }else {
    return str;
  }
}
</script>

<template>
  <section class="homeModelTwoUtil" @click="toRoute()" :class="{'br': borderR, 'more-wrap':eleType==1}" v-if="product">
    <div class="title" :class="eleType==1?getClass():''">{{product.productName2}}</div>
    <div class="desc">{{product.productDescription}}</div>
    <div class="img-icon" :style="{background: `#ccc url(${getImg(product.productIcon, 0)}) no-repeat center`}"></div>
  </section>
</template>

<style lang="less" scoped>
.homeModelTwoUtil {
  width: .92rem;
  height: 1.2rem;
  background: white;
  padding: .05rem 0 .05rem .1rem;
  box-sizing: border-box;
  position: relative;
  &.br:after {
    height: 100%;
    content: "";
    width: .01rem;
    border-right: .01rem solid transparent;
    position: absolute;
    background: #f5f5f5;
    top: 0;
    right: 0;
    -webkit-transform: scaleX(.5);
    transform: scaleX(.5);
    z-index: 10;
  }
  &.more-wrap {
    .title {
      -webkit-background-clip: text !important;
      color: transparent;
    }
  }
  .title {
    height: .16rem;
    line-height: .16rem;
    font-size: .14rem;
    color: #222;
    margin-bottom: .04rem;
    &.color1 {
      background: linear-gradient(90deg, #FF2A2A,#F139D2);
    }
    &.color2 {
      background: linear-gradient(90deg, #FE8537,#F02B2B);
    }
    &.color3 {
      background: linear-gradient(90deg, #FF765C,#FF23B3);
    }
    &.color4 {
      background: linear-gradient(90deg, #FF2A00,#FF00AF);
    }
    &.color5 {
      background: linear-gradient(90deg, #D400FF,#FF320A);
    }
    &.color6 {
      background: linear-gradient(90deg, #00C2AB,#3E94FF);
    }
    &.color7 {
      background: linear-gradient(90deg, #FF765C,#FF23B3);
    }
    &.color8 {
      background: linear-gradient(90deg, #2AD396,#85BB1F);
    }
  }
  .desc {
    color: #648EFF;
    font-size: .12rem;
    margin-bottom: .1rem;
    height: .14rem;
    line-height: .14rem;
    overflow: hidden;
  }
  .img-icon {
    width: .65rem;
    height: .65rem;
    background-size: cover!important;
  }
}
</style>

